<template>
	<div class="box">
		<div class="selectBox">
			<div class>
				<!-- 新增按钮 -->
				<el-button icon="el-icon-plus" @click="zidianAddModel" size="mini"></el-button>
			</div>
			<div>
				<el-form ref="paramform" size="mini" :model="form" inline>
					<el-form-item label>
						<el-select v-model="paramform.cargoclasscode" placeholder="货物类型" clearable filterable style="width:150px">
							<el-option v-for="item in cargoClass" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchClickHm()" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<!-- 货物列表 -->
		<BaseTable :data="cargotableDataList" :columns="cargoDataColumns" :height="tableHeight1" :pagination="false"></BaseTable>

		<div class="page">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="startpage1"
			 :page-sizes="[15, 20, 25, 30]" :page-size="pagesize1" layout="total, sizes, prev, pager, next, jumper" :total="totalNum1"></el-pagination>
		</div>
		<el-drawer :title="cargotitle" :visible.sync="addzidian" direction="rtl" style="z-index: 2007;">
			<el-form ref="addming" status-icon size="small" :model="formList" style="padding:10px 20px;" :rules="addrule">
				<el-form-item prop="cargoName" label="货名名称" :label-width="formLabelWidth" >
					<el-input @input="formList.cargoName = verifyfilter('char', formList.cargoName)" v-model="formList.cargoName"
					 autocomplete="off" @blur="autoCargoRefer('formList', 'cargoName')"></el-input>
				</el-form-item>
				<el-form-item prop="shortCode" label="速记码" :label-width="formLabelWidth">
					<el-input @input="formList.shortCode = verifyfilter('latin', formList.shortCode)" v-model="formList.shortCode"
					 autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="sortNum" :rules="[{ required: true, message: '排序不能为空' }]" label="排序" :label-width="formLabelWidth">
					<el-input @input="formList.sortNum = verifyfilter('digit', formList.sortNum)" type v-model="formList.sortNum"
					 autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="货名颜色" :label-width="formLabelWidth">
					<el-color-picker :active-change="changeColor" v-model="formList.cargoColor"></el-color-picker>
				</el-form-item>
			</el-form>
			<div class="demo-drawer__footer">
				<el-button size="small" type="primary" @click="addZidian()">保 存</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import CheckTable from '@/components/BaseTable/baseTablecheck'
	import BaseTable from '@/components/BaseTable'
	import verify from '@/plugins/verify.js'
	export default {
		name: 'metadataGoods',
		components: {
			CheckTable,
			BaseTable
		},
		data() {
			return {
				addrule: {
					sortNum: [{
						required: true,
						message: '请输入排序',
						trigger: 'blur'
					}],
					cargoclasscode: [{
						required: true,
						message: '货物类型不能为空',
						trigger: 'change'
					}],
					shortCode: [{
						required: true,
						message: '速记码不能为空',
						trigger: 'change'
					}],
					cargoName: [{
						required: true,
						message: '货物名称不能为空',
						trigger: 'change'
					}]
				},
				formLabelWidth: '100px', // form的item宽度
				cargotitle: "新增货物",
				paramform: {
					cargoclasscode: '',
					cargoclasstype: 'cargoclass',
					cargo: '',
					remark: '',
					delFlag: ''
				}, // 查询类型
				currentPage: 1,
				startpage1: 1,
				pagesize1: 10,
				totalNum1: 1,
				totalNum: 1,
				loading: false,
				addzidian: false, // 新增货物框
				cargoClass: [],
				ParamformList: {
					dictLabel: '',
					dictValue: '',
					sortNum: '',
					cargo: '',
					remark: '',
					delFlag: '0',
					cargoName: ''
				}, // 查询货物
				formList: {
					cargoName: '',
					dictLabel: '',
					dictValue: '',
					sortNum: '',
					cargo: '',
					remark: '',
					delFlag: '0',
					color: '#409EFF'
				}, // 货名列表form
				form: {
					cargoName: '',
					shortCode: '',
					cargoCode: '',
					sortNum: '',
					cargoclassCode: ''
				}, // 货物列表form
				cargotableDataList: [], // 货物配置
				tableHeight: window.innerHeight - 200,
				tableHeight1: window.innerHeight,
				cargoDataColumns: [{
						prop: "cargoinfoName",
						label: "货物名称"
					},
					{
						prop: "shortCode",
						label: "速记码"
					},
					{
						prop: "cargoinfoColor",
						label: "货名颜色",
					},
					{
						prop: "sortNum",
						label: "排序",
						sortable: true
					},
					{
						label: "操作",
						render: (h, params) => {
							return h('div', {
								calss: 'btnClass'
							}, [
								h('el-button', {
									props: {
										size: 'mini',
									},
									style: {
										marginRight: "10px"
									},
									domProps: { // 添加标签,使用自己引入的iconfont图标
										innerHTML: "<span style='color:#409eff'><i class='iconfont icon-liebiaotubiao_liebiaobianji'></i><span  style='padding-left:5px;'>编辑</span></span>"
									},
									on: {
										click: () => {
											click: this.zEdit(params.$index, params.row)
										}
									}
								}),
								h('el-button', {
									props: {
										size: 'mini',
									},
									domProps: { // 添加标签,使用自己引入的iconfont图标
										innerHTML: "<span style='color:#f56c6c'><i class='iconfont icon-tubiao_liebiaoshanchu'></i><span  style='padding-left:5px;'>删除</span></span>"
									},
									on: {
										click: () => {
											click: this.handleDelete('huoming', params.row.id)
										}
									}
								}),
							]);

						},
					},
				],
			}
		},
		mounted() {
			this.getListData()
			this.getParas()
		},
		watch: {

		},
		methods: {
			searchClickHm() {
				this.startpage1 = 1
				this.getListData()
			},
			async getParas() {
				const res = await this.$http.get(
					`/${this.$ServiceName}/api/external/public/listdict?dicttype=cargoclass`
				)
				if (res.status == 200) {
					if (res.data.success) {
						// console.log(res)
						this.cargoClass = res.data.data
					} else {
						return this.$message.warning(res.data.msg)
					}
				} else {
					this.$message.error('获取数据失败！')
				}
			},
			// 货名新增弹出框
			zidianAddModel() {
				if (!this.addzidian) {
					this.addzidian = true
				}
				this.ref = 'addming'
				this.formList = {
					dictLabel: '',
					dictValue: '',
					sortNum: '',
					shortCode: '',
					cargo: '',
					remark: '',
					delFlag: '0',
					color: '#409EFF'
				}
				this.formList.cargoCode = this.cargeCode
			},
			// 货名列表
			async getListData() {
				const res = await this.$http.get(
					`/${this.$ServiceName}/api/external/mtcargo/getcargoinfolistbycargoid?startpage=${this.startpage1}&pagesize=${this.pagesize1}&cargocode=01000001&cargoinfoName=${this.ParamformList.cargoName}`
				)
				if (res.status == 200) {
					if (res.data.data) {
						this.cargotableDataList = res.data.data.pages
						// 分页
						this.startpage1 = res.data.data.pageNum
						this.totalNum1 = parseInt(res.data.data.totalNum)
						this.pagesize1 = res.data.data.pageSize
					}
				} else {
					this.$message.error('获取数据失败！')
				}
			},
			// 修改货名弹出
			async zEdit(index, row) {
				this.cargotitle = "编辑货名"
				this.ref = 'addming'
				this.formList.cargoinfoCode = this.formList.cargoCode
				const res = await this.$http.get(
					`/${this.$ServiceName}/api/external/mtcargo/querycargoinfobyid?id=${row.id}`
				)
				if (res.data.success) {
					this.formList = res.data.data
				} else {
					return
				}
				if (!this.addzidian) {
					this.addzidian = true
				}
			},
			// 每页显示的条数
			handleSizeCha(val) {
				console.log(val)
				this.pagesize1 = val
				this.getListData()
			},
			// 每页显示的条数
			handleSizeChange(val) {
				this.pagesize = val
				this.getData()
			},
			// 当前页
			handleCurrentCha(val) {
				this.startpage1 = val
				this.getListData()
			},
			// 当前页
			handleCurrentChange(val) {
				this.startpage = val
				this.getData()
			},
			// 修改颜色选择器
			changeColor() {
				// console.log(this.formList.color);
				// console.log(this.nowData.color);
			},
		}


	}
</script>
<style lang="less" scoped>
	.isomcolor {
		width: 1rem;
		height: 1rem;
		position: absolute;
		border-radius: 3px;
		left: 37%;
		top: 0.7rem;
	}

	/deep/ .el-button--primary {
		background-color: #338ce8;
		border-color: #338ce8;
	}

	.page {
		background: #ffffff;
		border-radius: 4px 4px 0 0;
		padding: 0 1rem;
	}

	.box {
		background: #ffffff;
		border: 1px solid #e1e4eb;
		border-radius: 4px 4px 0 0;
		border-top: none;
	}

	.title {
		background: #f5f7fa;
		height: 40px;
		line-height: 40px;

		p {
			font-family: MicrosoftYaHei;
			font-size: 16px;
			color: #303133;
			letter-spacing: 0;
			line-height: 16px;
			padding-left: 14px;
			line-height: 40px;
		}
	}

	/deep/ .el-table .cell {
		white-space: nowrap;
	}

	/deep/ .el-form-item--mini .el-form-item__label {
		line-height: 0;
	}

	/deep/ .el-pagination {
		text-align: right;
		padding: 10px 5px;
	}

	/deep/ .el-table th>.cell {
		font-family: PingFangSC-Semibold;
		font-size: 14px;
		color: #606266;
	}

	/deep/ .el-table .el-button:focus,
	.el-table .el-button:hover {
		background-color: #fff;
		border: 1px solid #e1e4eb;
	}

	/deep/ .el-table .el-button--mini {
		color: #1684f6;
		border-color: transparent;
		background: transparent;
	}

	/deep/ .el-table th {
		border-left: 1px solid #ebeef5;
	}

	/deep/ .el-table th:nth-child(1) {
		border-left: none;
	}

	/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
		background: #f5f7fa;
	}

	/deep/.el-pagination.is-background .btn-next,
	/deep/ .el-pagination.is-background .btn-prev,
	/deep/ .el-pagination.is-background .el-pager li {
		background: #ffffff;
		border: 1px solid #e1e4eb;
		border-radius: 3px;
		border-radius: 3px;
	}

	.btn /deep/ .el-button--mini,
	.el-button--mini.is-round {
		padding: 7px 6px;
	}

	.selectBox {
		justify-content: space-between;
		display: flex;
		flex-direction: row-reverse;
		background: #ffffff;
		border: 1px solid #e1e4eb;
		border-left: none;
		line-height: 28px;
		height: 37px;
		padding-top: 11px;
		padding-left: 14px;
		padding-right: 20px;
	}

	// .excelBox /deep/ .el-drawer__open .el-drawer.rtl {
	//   width: 50% !important;
	// }

	/deep/ .el-drawer__header {
		margin-bottom: 0px;
		padding: 16px;
		border-bottom: 1px solid gainsboro;
	}

	/deep/ .demo-drawer__footer {
		text-align: right;
		padding-right: 1rem;
		border-top: 1px solid #c8cfde;
		background-color: #f5f7fa;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		line-height: 50px;
	}

	/deep/ .el-button+.el-button {
		margin-left: 3px;
	}
</style>
